<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css" />
    <link rel="stylesheet" href="./css/shopcar.css" />
  </head>
  <body>
    <!-- top -->
    <div class="top">购物车</div>

    <!-- 你的购物车是空的 -->
    <div class="shopNull">
      <div class="pic">
        <img src="./imgs/empty.png" alt="">
      </div>
      <div class="tex">您的购物车是空的, 快去逛逛吧</div>
      <div class="btn">
        <span>去逛逛</span>
      </div>
    </div>

    <!-- 购物车有东西时 -->
    <div class="head">
      <div class="left">
        <span class="gon">共</span>
        <span class="num">2</span>
        <span class="shangping">件商品</span>
      </div>
      <div class="right">
        <span class="iconfont icon-fenlei"></span>
        <span class="normal">编辑</span>
      </div>
    </div>
    <!-- 购物车内容 -->
    <div class="list">
      <div class="car-list">
        <input class="checkbox" type="checkbox" name="" id="">
        <div class="pic">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="name">
          <span class="ellipsis-2">Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机</span>
          <div class="price">
            <span>￥</span>
            <span>9899.00</span>
            <button class="det">—</button>
            <input class="number" type="number" name="" pattern="[0-9]" autocomplete="off" value="1">
            <button class="add">+</button>
          </div>
        </div>
      </div>
      <div class="car-list">
        <input class="checkbox" type="checkbox" name="" id="">
        <div class="pic">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="name">
          <span class="ellipsis-2">Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机</span>
          <div class="price">
            <span>￥</span>
            <span>9899.00</span>
            <button class="det">—</button>
            <input class="number" type="number" name="" pattern="[0-9]" autocomplete="off" value="1">
            <button class="add">+</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部快捷导航 -->
    <div class="footer">
      <ul>
        <li class="">
          <i class="iconfont icon-shouye-zhihui"></i>
          <p>首页</p>
        </li>
        <li>
          <i class="iconfont icon-fenlei"></i>
          <p>分类</p>
        </li>
        <li class="active">
          <i class="iconfont icon-gouwuche"></i>
          <p>购物车</p>
        </li>
        <li>
          <i class="iconfont icon-wode"></i>
          <p>我的</p>
        </li>
      </ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

    <script src="./js/shopcar.js"></script>
    <!-- <script src="./js/commen.js"></script> -->
  </body>
</html>
